<template>
    <view class="template-study tn-safe-area-inset-bottom">
        <!-- 轮播图 -->
        <swiper class="card-swiper" :circular="true" :autoplay="true" duration="500" interval="18000"
            @change="cardSwiper" :current="cardCur" ref="swiperRef">
            <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''" @click="handleSwiperItemClick(item.id)">
                <view class="swiper-item image-banner">
                    <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
                </view>
                <view class="swiper-item2 image-banner">
                    <image class="png-sussuspension" :src="item.pngurl" mode="heightFix" v-if="item.type=='image'">
                    </image>
                </view>
                <view class="swiper-item-text">
                    <view class="text-sussuspension">
                        <view class="tn-text-xxl tn-text-bold tn-color-white">{{item.title}}</view>
                        <view class="tn-text-bold tn-color-white tn-padding-top-xs" style="font-size: 60rpx;">
                            {{item.name}}
                        </view>
                        <view class="tn-text-sm tn-text-bold tn-color-white tn-padding-top-sm tn-padding-bottom-sm">
                            {{item.text}}
                        </view>
                    </view>
                </view>
            </swiper-item>
        </swiper>
        <!-- 左右箭头 -->
        <view class="arrow left-arrow" @click="prevSlide">
            <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="white">
                <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
            </svg>
        </view>
        <view class="arrow right-arrow" @click="nextSlide">
            <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="white">
                <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
            </svg>
        </view>

    </view>
</template>

<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
    name: 'TemplateStudy',
    mixins: [template_page_mixin],
    data() {
        return {
            cardCur: 0,
            swiperList: [
                {
                    id: 0,
                    type: 'image',
                    title: '温柔暖男',
                    name: '逸轩',
                    text: '他有着如春日暖阳般的笑容，温柔体贴，总是在你最需要的时候默默陪伴，用温暖的话语治愈你的心灵。',
                    url: '/static/index/1.jpg',
                    pngurl: '/static/index/1_middle_kou.png'
                },
                {
                    id: 1,
                    type: 'image',
                    title: '阳光少年',
                    name: '宇澄',
                    text: '他活力四射，像清晨的第一缕阳光，充满着朝气与热情。和他在一起，仿佛所有的烦恼都能烟消云散。',
                    url: '/static/index/sunboy.png',
                    pngurl: '/static/index/sunboy_middle_kou.png'
                },
                {
                    id: 2,
                    type: 'image',
                    title: '霸道总裁',
                    name: '墨寒',
                    text: '他气场强大，有着与生俱来的王者风范。在他的世界里，你就是他唯一的例外，他会用他的方式守护你。',
                    url: '/static/index/zongcai.png',
                    pngurl: '/static/index/zongcai_middle_kou.png'
                },
                {
                    id: 3,
                    type: 'image',
                    title: '文艺青年',
                    name: '梓轩',
                    text: '他才华横溢，喜欢沉浸在自己的艺术世界里。他的文字和画作，都充满了对生活的热爱和对美好的向往。',
                    url: '/static/index/wenyi.png',
                    pngurl: '/static/index/wenyi_middle_kou.png'
                },
                {
                    id: 4,
                    type: 'image',
                    title: '运动健将',
                    name: '俊辉',
                    text: '他身材矫健，在运动场上挥洒着汗水。他的坚持和拼搏精神，总能感染身边的人，让人忍不住为他加油喝彩。',
                    url: '/static/index/sports.png',
                    pngurl: '/static/index/sports_middle_kou.png'
                }
            ],
        }
    },
    methods: {
        // cardSwiper
        cardSwiper(e) {
            this.cardCur = e.detail.current
        },
        // 上一张
        prevSlide() {
            if (this.cardCur > 0) {
                this.cardCur--;
            } else {
                this.cardCur = this.swiperList.length - 1;
            }
        },
        // 下一张
        nextSlide() {
            if (this.cardCur < this.swiperList.length - 1) {
                this.cardCur++;
            } else {
                this.cardCur = 0;
            }
        },
        // 处理swiper-item点击事件
        handleSwiperItemClick(id) {
            // 找到当前点击的轮播图信息
            const currentItem = this.swiperList.find(item => item.id === id);
            if (currentItem) {
                console.log('当前点击的轮播图信息：', currentItem);
                // 跳转到子页面，这里假设子页面路径为 '/pages/detail/detail'，并传递id参数
                uni.navigateTo({
                    url: `/homePages/charaterDetail?id=${id}`
                });
            }
        }
    }
}
</script>

<style lang="scss" scoped>
/* 整体页面布局 */
.template-study {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

/* 轮播图样式 */
.card-swiper {
    flex: 1;
    height: auto !important;
}

.card-swiper swiper-item {
    width: 100vw !important;
}

/* 左右箭头样式 */
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 10;
}

.left-arrow {
    left: 10px;
}

.right-arrow {
    right: 10px;
}

/* 其他样式保持不变 */
/* 胶囊*/
.tn-custom-nav-bar__back {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 1000rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    font-size: 18px;

    .icon {
        display: block;
        flex: 1;
        margin: auto;
        text-align: center;
    }

    &:before {
        content: " ";
        width: 1rpx;
        height: 110%;
        position: absolute;
        top: 22.5%;
        left: 0;
        right: 0;
        margin: auto;
        transform: scale(0.5);
        transform-origin: 0 0;
        pointer-events: none;
        box-sizing: border-box;
        opacity: 0.7;
        background-color: #FFFFFF;
    }
}

/* 内容 */
.study-wrap {
    position: relative;
    z-index: 1;
    margin-top: -90rpx;
}

/* 阴影 start*/
.study-shadow {
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}

/* 悬浮 */
.png-sussuspension {
    width: 800rpx  !important;
    height: 800rpx  !important;
    animation: suspension 3s ease-in-out infinite;
}


@keyframes suspension {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-0.8rem, 1rem);
    }
}

.text-sussuspension {
    animation: suspension2 4s ease-in-out infinite;
}

@keyframes suspension2 {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(0rem, 1rem);
    }
}

/* 轮播视觉差 start */
.card-swiper swiper-item .swiper-item {
    width: 100%;
    display: block;
    height: 667px;
    transform: scale(1);
    transition: all 0.2s ease-in 0s;
    will-change: transform;
    overflow: hidden;
}

.card-swiper swiper-item.cur .swiper-item {
    transform: none;
    transition: all 0.2s ease-in 0s;
    will-change: transform;
}

.card-swiper swiper-item .swiper-item2 {
    margin-top: -1250rpx;
    width: 100%;
    display: block;
    height: 100%;
    border-radius: 0rpx;
    transform: translate(160rpx, 220rpx) scale(0.3, 0.3);
    transition: all 0.6s ease 0s;
    will-change: transform;
    // overflow: hidden;
}

.card-swiper swiper-item.cur .swiper-item2 {
    margin-top: -1250rpx;
    width: 100%;
    transform: translate(160rpx, 220rpx) scale(0.5, 0.5);
    transition: all 0.6s ease 0s;
    will-change: transform;
}

.card-swiper swiper-item .swiper-item-text {
    margin-top: -550rpx;
    width: 100%;
    display: block;
    height: 50%;
    border-radius: 10rpx;
    transform: translate(60rpx, -60rpx) scale(0.9, 0.9);
    transition: all 0.6s ease 0s;
    will-change: transform;
    overflow: hidden;
}

.card-swiper swiper-item.cur .swiper-item-text {
    margin-top: -610rpx;
    width: 100%;
    transform: translate(0rpx, 60rpx) scale(0.9, 0.9);
    transition: all 0.6s ease 0s;
    will-change: transform;
}

.image-banner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-banner image {
    width: 100%;
    height: 100%;
}


/* 标签内容 start*/
.tn-tag-content {
    border-radius: 8rpx 25rpx 25rpx 8rpx;
    display: inline-block;
    line-height: 35rpx;
    padding: 8rpx 25rpx;
    color: rgba(255, 255, 255, 0.8);
}
</style>